<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
<link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>PixelArray</h2>

<p>This code was updated from the Java source to work with Processing.js asynchronous image loading.</p>

<p>Click and drag the mouse up and down to control the signal and 
press and hold any key to see the current pixel being read. 
This program sequentially reads the color of every pixel of an image
and displays this color to fill the window.</p>

<p><a href="http://processing.org/learning/topics/pixelarray.html"><b>Original Processing.org Example:</b> PixelArray</a><br>
<script type="application/processing">
PImage a;
int[] aPixels;
int direction = 1;
boolean onetime = true;
float signal;

void setup() 
{
  size(200, 200);
  aPixels = new int[width*height];
  noFill();
  stroke(255);
  frameRate(30);
  a = loadImage("data/ystone08.jpg", null, function(){
    for(int i=0; i<width*height; i++) {
      aPixels[i] = a.pixels[i];
    }
  });  
}

void draw() 
{
  if (signal > width*height-1 || signal < 0) { 
    direction = direction * -1; 
  }

  if(mousePressed) {
    if(mouseY > height-1) { mouseY = height-1; }
    if(mouseY < 0) { mouseY = 0; }
    signal = mouseY*width+mouseX;
  } else {
    signal += (0.33*direction);  
  }
  
  if(keyPressed) {
    image(a, 0, 0);
    /*
    loadPixels();
    for (int i=0; i<width*height; i++) { 
      pixels[i] = aPixels[i];  
    }
    updatePixels();
    */
    rect(signal%width-5, int(signal/width)-5, 10, 10);
    point(signal%width, int(signal/width));
  } else {
    background( aPixels[int(signal)] );
    /*
    loadPixels();
    for (int i=0; i<width*height; i++) { 
      pixels[i] = aPixels[int(signal)];
    }
    updatePixels();
    */
  }
}
</script><canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"><img src='data/ystone08.jpg' id='ystone08.jpg'/></div>

<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
PImage a;
int[] aPixels;
int direction = 1;
boolean onetime = true;
float signal;

void setup() 
{
  size(200, 200);
  aPixels = new int[width*height];
  noFill();
  stroke(255);
  frameRate(30);
  a = loadImage("data/ystone08.jpg", null, function(){
    for(int i=0; i<width*height; i++) {
      aPixels[i] = a.pixels[i];
    }
  });
}

void draw() 
{
  if (signal &gt; width*height-1 || signal &lt; 0) { 
    direction = direction * -1; 
  }

  if(mousePressed) {
    if(mouseY &gt; height-1) { mouseY = height-1; }
    if(mouseY &lt; 0) { mouseY = 0; }
    signal = mouseY*width+mouseX;
  } else {
    signal += (0.33*direction);  
  }
  
  if(keyPressed) {
    loadPixels();
    for (int i=0; i&lt;width*height; i++) { 
      pixels[i] = aPixels[i];  
    }
    updatePixels();
    rect(signal%width-5, int(signal/width)-5, 10, 10);
    point(signal%width, int(signal/width));
  } else {
    loadPixels();
    for (int i=0; i&lt;width*height; i++) { 
      pixels[i] = aPixels[int(signal)];
    }
    updatePixels();
  }
}</pre>
</body>
</html>
